<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P189 【例8-1】demo01.html</title>
</head>

<body>
    <div id="tips"></div>
    <div class="box">
        <label>用户名：<input id="user" type="text"></label>
        <label>密码：<input id="pass" type="password"></label>
        <button id="login">登录</button>
    </div>
    <script>
        window.onload = function () {
            addBlur($('user'));
            addBlur($('pass'));
        }
        function $(obj) {
            return document.getElementById(obj);
        }
        function addBlur(obj) {
            obj.onblur = function () {
                isEmpty(this);
            };
        }
        function isEmpty(obj) {
            if (obj.value === '') {
                $('tips').style.display = 'block';
                $('tips').innerHTML = '注意：输入内容不能为空！';
            } else {
                $('tips').style.display = 'none';
            }
        }
    </script>
    <a href="../首页/page08.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>